<template>
	<view class="content">
		<view class="time">
			<text>选择开始游玩时间和结束游玩时间</text>
			<view class="time-list">
				<view v-if="!from.startDate">
					<u-icon name="calendar-fill" color="#63b4ff" size="55"></u-icon>
					<!-- <view @tap="showPicker">选择开始时间和结束时间</view> -->
					<view @click="showcalendar = true">选择开始游玩时间和结束游玩时间</view>
				</view>
				<view v-if="from.startDate" @tap="showPicker" @click="showcalendar = true">
					<u-icon name="calendar-fill" color="#63b4ff" size="55"></u-icon>
					<view class="time-display">
						<text>{{ from.startDate }} 到 {{ from.endDate }}</text>
					</view>
				</view>
			</view>
		</view>
		<u-calendar :show="showcalendar" :mode="mode" rowHeight="100" @confirm="confirm"></u-calendar>

		<view class="cameraman">
			<text class="cameraman-text">旅行人数</text>
			<view class="box">
				<uni-section class="uni-section" type="line">
					<uni-data-select v-model="from.peopleNumber" :localdata="range"
						@change="cityChange"></uni-data-select>
				</uni-section>
			</view>
		</view>

		<!-- <view class="vertical-selector">
			<view class="selector-title">请选择司机摄影师导游的类型</view>
			<view v-for="(item, index) in typelist" :key="index" class="selector-option"
				:class="{ 'selected': typeIndex === index }" @click="selecttype(index, item.dictValue)">
				<text class="option-text">{{ item.remark }}</text>
				<text v-if="typeIndex === index" class="check-icon">✓</text>
			</view>
		</view> -->


		<!-- <view v-if="from.orderType == '1' || from.orderType =='2'"> -->
		<view>
			<view class="photographer">
				<view class="gender-label">是否需要摄影师</view>
				<view class="needphotographer">
					<view v-for="item,index in needphotographerList" :key="index"
						:class="{active:needphotographerIndex == index}" @click="getneedphotographer(index,item)">
						{{item.name}}
					</view>
				</view>
			</view>

			<view class="photographer" v-if="from.needCameraman==0">
				<view class="gender-selector">
					<view class="gender-label">摄影师性别</view>
					<view class="gender-cards">
						<view class="gender-card" :class="{ 'selected': from.cameramanSex === 'female_photography' }"
							@tap="selectGender('female_photography')">
							<text class="crown">👑</text>
							<u-icon name="woman" size="30"
								:color="from.cameramanSex === 'female_photography' ? '#fff' : '#FFC0CB'"></u-icon>
							<text>女摄影师</text>
						</view>
						<view class="gender-card" :class="{ 'selected': from.cameramanSex === 'male_photography' }"
							@tap="selectGender('male_photography')">
							<u-icon name="man" size="30"
								:color="from.cameramanSex === 'male_photography'  ? '#fff' : '#87CEEB'"></u-icon>
							<text>男摄影师</text>
						</view>
					</view>
				</view>
			</view>

			<view class="cameraman" v-if="from.needCameraman==0">
				<text class="cameraman-text">摄影师类型</text>
				<view class="box">
					<view class="picture" v-for="(item,index)  in cameraman" :key="index"
						:class="{active:cameramanIndex == index,grayed: index !== cameramanIndex }"
						@click="cameramanCard(index,item.dictValue)">
						<text>{{item.dictLabel}}</text>
					</view>
				</view>
			</view>

			<view class="Shooting" v-if="from.needCameraman==0">
				<view class="Shooting-text">
					<text>拍摄方式选择精修简修照片</text>
					<text>(默认{{number}}张)</text>
				</view>
				<view class="box">
					<view class="box-input">
						<text>精修：</text>
						<uni-icons type="image" size="30" color="#666"></uni-icons>
						<input type="text" v-model="from.truingNumber" placeholder="精修照片多少" />
						<text>张</text>
					</view>
					<view class="box-input">
						<text>简修：</text>
						<uni-icons type="image" size="30" color="#666"></uni-icons>
						<input type="text" v-model="from.simpleModifyNumber " placeholder="简修照片多少" />
						<text>张</text>
					</view>
				</view>
			</view>
		</view>

		<view class="vertical-selector" v-if="from.orderType == '1'">
			<view class="selector-title">是否需要司机</view>
			<view v-for="(item, index) in driverOptions" :key="index" class="selector-option"
				:class="{ 'selected': driverIndex == index }" @click="selectDriver(index, item.value,item.carType)"
				v-show="!(from.cameramanSex == 'female_photography' && item.value == 1)">
				<text class="option-text">{{ item.label }}</text>
				<text v-if="driverIndex == index" class="check-icon">✓</text>
			</view>
		</view>


		<view v-if="from.needDriver == 0" class="vertical-selector">
			<view class="selector-title">请选择包车</view>
			<view v-for="(item, index) in filteredCarOptions" :key="index" class="selector-option"
				:class="{ 'selected': selectedIndex == index }" @click="selectOption(index, item.dictValue)">
				<text class="option-text">{{ item.dictLabel }}</text>
				<text v-if="selectedIndex == index" class="check-icon">✓</text>
			</view>
		</view>

		<view class="cameraman">
			<text class="cameraman-text">是否包含门票</text>
			<view class="box">
				<view class="admission" v-for="(item, index) in feeList" :key="index">
					<switch color="#63b4ff" :checked="item.checked" size="20" :disabled="isDisabled(index)"
						@change="(e) => switchChange(e, index)" />
					<text>{{item.dictLabel}}</text>
				</view>
			</view>
		</view>


		<view class="cameraman">
			<text class="cameraman-text">是否包含住宿</text>
			<view class="box">
				<radio-group @change="radioChange" class="radio-group">
					<label v-for="(item, index) in stayList" :key="index" class="radio-label">
						<radio :value="item.dictValue" :checked="item.dictValue == from.containStay" color="#63b4ff"
							class="radio" />
						<text
							:class="['radio-text', { 'selected': item.dictValue == from.containStay }]">{{item.dictLabel}}</text>
					</label>
				</radio-group>
			</view>
		</view>
		<view class="pace">
			<button @click="goBack()">总计：{{totalAmount}}元</button>
			<button @click="goTravelChoice()">支付</button>
		</view>
	</view>
</template>

<script>
	import DateTimeRangePicker from '@/components/DateTimePicker.vue'
	export default {
		data() {
			const now = new Date();
			return {
				pathId: 0,
				wayRange: [],
				activeIndex: 0,
				cameraman: [],
				cameramanIndex: 0,
				selectedIndex: 0,
				totalAmount: 0,
				options: [],
				from: {
					// pathId: 0, //推荐路线id
					cameramanSex: 'male_photography', //摄影师性别
					shootingMethod: 'truing', // 拍摄方式
					cameramanType: 'senior_photographer', //摄影师类型
					carType: 'seven_seats', //车辆类型
					containTickets: 0, //0包含 1不包含 是否包含门票
					needCameraman: 0, //是否需要摄影师
					containStay: 0, //0住宿 1不住宿
					peopleNumber: 1, //人数
					startDate: '', //开始时间
					endDate: '', //结束时间
					orderType: 1, //订单类型
					orderPathAttractionList: [],
					needDriver: 0,
					truingNumber: 10,
					simpleModifyNumber: 40,
				},
				range: [{
						value: 1,
						text: '1人'
					},
					{
						value: 2,
						text: '2人'
					},
					{
						value: 3,
						text: '3人'
					},
					{
						value: 4,
						text: '4人'
					},
					{
						value: 5,
						text: '5人'
					},
				],
				cityday: '请选择',
				feeList: [{
						dictLabel: '包含门票',
						dictValue: 0,
						checked: true,
					},
					{
						dictLabel: '不包含门票',
						dictValue: 1,
						checked: false,
					}
				],
				stayList: [{
						dictLabel: '包含住宿',
						dictValue: 0,
						checked: true,
					},
					{
						dictLabel: '不包含住宿',
						dictValue: 1,
						checked: false,
					}
				],
				needphotographerList: [{
						name: '需要摄影师',
						value: 0
					},
					{
						name: '不需要摄影师',
						value: 1
					}
				],
				needphotographerIndex: 0,
				typeIndex: 0,
				pickerVisible: false,
				number: 40, //基础照片数量
				showcalendar: false,
				driverOptions: [{
						label: '需要司机',
						value: 0,
						carType: 'five_seats'
					},
					{
						label: '不需要司机',
						value: 1,
						carType: 'no_package_car'
					}
				],
				driverIndex: 0,
				typelist: []
			};
		},
		computed: {
			filteredCarOptions() {
				return this.options.filter(option =>
					option.dictValue === 'five_seats' || option.dictValue === 'seven_seats'
				);
			},
		},
		components: {
			DateTimeRangePicker
		},
		methods: {
			// 跳转到订单页面
			goTravelChoice() {
				if (!this.from.startDate) {
					this.$u.toast('请选择游玩时间')
					return
				}
				if (!this.from.truingNumber) {
					this.$u.toast('请输入精修照片数量')
					return
				}
				if (!this.from.simpleModifyNumber) {
					this.$u.toast('请输入简修照片数量')
					return
				}
				let all = this.from.truingNumber + this.from.simpleModifyNumber
				if (all < 50) {
					this.$u.toast('请输入精修简修照片数量不能少于50张')
					return
				}
				const from = encodeURIComponent(JSON.stringify(this.from))
				console.log(this.from);
				uni.navigateTo({
					url: `/packagesIndex/pages/calculation/calculation?from=${from}`
				})
			},
			// 获取总价格
			async getuserPlancountAmount() {
				let res = await this.$u.api.getuserPlancountAmount(this.from)
				if (res.code == 200) {
					this.totalAmount = res.data.totalAmount
				}
			},
			// 获取选择司机摄影师导游的类型
			async gettype() {
				let res = await this.$u.api.getdictdatatype({
					dictType: 'order_type'
				})
				if (res.code == 200) {
					this.typelist = res.data;
				}
			},
			// 获取拍摄方式数据
			async getdictdatatype() {
				let res = await this.$u.api.getdictdatatype({
					dictType: 'shooting_method'
				})
				if (res.code == 200) {
					this.wayRange = res.data
				}
			},
			// 获取摄影师类型数据
			async getcameramantype() {
				let res = await this.$u.api.getdictdatatype({
					dictType: 'cameraman_type'
				})
				if (res.code == 200) {
					this.cameraman = res.data
				}
			},

			// 获取车辆数据
			async getacrtype() {
				let res = await this.$u.api.getdictdatatype({
					dictType: 'car_type'
				})
				if (res.code == 200) {
					this.options = res.data;
					this.updateCarSelection();
				}
			},

			// 查询基础照片数量
			async getconfigKey() {
				let res = await this.$u.api.getconfigKey({
					configKey: 'photo_num'
				})
				if (res.code == 200) {
					this.number = Number(res.msg)
				}
			},

			// 选择人数
			cityChange(e) {
				this.from.peopleNumber = e
			},
			// 选择天数
			citydayChange(e) {
				this.cityday = e.detail.value == 0 ? '请选择' : e.detail.value + '天';
			},
			// 选择门票
			switchChange(e, index) {
				this.feeList[index].checked = e.detail.value;
				this.from.containTickets = index;
				console.log(this.from.containTickets);
				// 如果当前选项被选中，禁用其他选项
				if (e.detail.value) {
					this.feeList.forEach((item, i) => {
						if (i !== index) {
							item.checked = false;
						}
					});
				}
			},
			isDisabled(index) {
				// 实现禁用逻辑（如果需要的话）
				return false;
			},
			// 选择是否需要摄影师
			getneedphotographer(index, item) {
				this.needphotographerIndex = index
				this.from.needCameraman = item.value
				this.getuserPlancountAmount()
			},

			// 选择几座车
			selectOption(index, dictValue) {
				this.selectedIndex = index;
				this.from.carType = dictValue;
			},
			// 选择摄影师性别
			selectGender(gender) {
				this.from.cameramanSex = gender;
				if (gender == 'female_photography') {
					this.selectDriver(0, 0, 'five_seats');
					this.$u.toast('选择女摄影师必须包车哦！');
					if (this.from.carType == 'no_package_car') {
						const fiveSeatsOption = this.options.find(option => option.dictValue == 'five_seats');
						if (fiveSeatsOption) {
							this.selectOption(this.options.indexOf(fiveSeatsOption), 'five_seats');
						}
					}
				}
				this.getuserPlancountAmount();
			},

			// 选择司机
			selectDriver(index, value, carType) {
				this.getuserPlancountAmount()
				if (this.from.cameramanSex == 'female_photography' && value == 1) {
					this.driverIndex = 0;
					this.from.needDriver = 0;
					this.from.carType = 'five_seats';
					this.$u.toast('选择女摄影师时必须选择需要司机');
					return;
				}

				this.driverIndex = index;
				this.from.needDriver = value;
				this.from.carType = carType
				if (value == 1) {
					this.from.carType = 'no_package_car';
					this.selectedIndex = -1;
				} else {
					if (this.filteredCarOptions.length > 0) {
						this.selectOption(0, this.filteredCarOptions[0].dictValue);
					}
				}
			},

			// 更新车辆选择
			updateCarSelection() {
				if (this.from.cameramanSex == 'female_photography') {
					// 如果选择的是女摄影师，且当前选择是"不包车"，则默认选择五座车
					if (this.from.carType == 'no_package_car') {
						const fiveSeatsIndex = this.filteredOptions.findIndex(option => option.dictValue ==
							'five_seats');
						if (fiveSeatsIndex != -1) {
							this.selectOption(fiveSeatsIndex, 'five_seats');
						}
					}
				}
			},
			// 选择摄影师类型
			cameramanCard(index, dictValue) {
				this.cameramanIndex = index;
				this.from.cameramanType = dictValue
			},
			// 选择拍摄方式
			selectCard(index, dictValue) {
				this.activeIndex = index;
				this.from.shootingMethod = dictValue
				// this.getuserPlancountAmount()
			},
			// 选择是否包含住宿
			radioChange(e) {
				this.from.containStay = e.detail.value;
				// this.from.containStay = this.stayList.findIndex(item => item.dictValue === value);
				console.log(this.from.containStay);
			},
			showPicker() {
				this.pickerVisible = true
			},
			onConfirm(dateTimeRange) {
				this.from.startDate = dateTimeRange.startDateTime || ''
				this.from.endDate = dateTimeRange.endDateTime || ''
				this.pickerVisible = false
			},
			onCancel() {
				this.pickerVisible = false
			},

			// 选择日期
			confirm(e) {
				this.from.startDate = e[0]
				const index = e.length - 1
				this.from.endDate = e[index]
				this.showcalendar = false
				this.getuserPlancountAmount()
			},
			// 选择类型
			selecttype(index, dictValue) {
				this.typeIndex = index;
				this.from.orderType = dictValue;
				if (dictValue == '2' || dictValue == '3') {
					this.$u.toast('当前订单类型必须包车!');
					if (this.from.carType == 'no_package_car') {
						const fiveSeatsOption = this.filteredOptions.find(option => option.dictValue == 'five_seats');
						if (fiveSeatsOption) {
							this.selectOption(this.filteredOptions.indexOf(fiveSeatsOption), 'five_seats');
						}
					}
				} else {

				}
				// this.getuserPlancountAmount();
			},
		},
		onLoad(options) {
			uni.showLoading({
				title: '加载中...'
			})
			this.getdictdatatype();
			this.getacrtype();
			this.getcameramantype();
			this.getconfigKey()
			this.gettype()
			this.from.pathId = options.id;
			setTimeout(() => {
				// this.getuserPlancountAmount();
				// 初始化选中的车辆选项
				const initialCarOption = this.filteredOptions ? this.filteredOptions[0] : '';
				if (initialCarOption) {
					this.selectOption(0, initialCarOption.dictValue);
				}
				if (options.orderPathAttractionList) {
					const decodedOrderList = decodeURIComponent(options.orderPathAttractionList);
					this.from.orderPathAttractionList = JSON.parse(decodedOrderList);
					// console.log(this.from);
				}
			}, 500);
			uni.hideLoading()
		},
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		background-color: #fff;
		box-sizing: border-box;
		padding-bottom: 160rpx;


		// 时间选择器
		.time {
			align-items: center;
			padding: 10rpx 30rpx;
			box-sizing: border-box;

			text {
				font-weight: 700;
			}

			.time-list {
				padding: 20rpx 0 0 0;
				box-sizing: border-box;

				view {
					display: flex;
					align-items: center;

					view {
						color: #242424;
					}
				}
			}
		}


		// 摄影
		.photographer {
			padding: 30rpx 40rpx;

			.needphotographer {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 20rpx 0 0 0;
				box-sizing: border-box;

				view {
					flex: 1;
					text-align: center;
					padding: 20rpx 30rpx;
					box-sizing: border-box;
					border: 1rpx solid #63b4ff;
					border-radius: 40rpx;
					color: #63b4ff;
					font-size: 27rpx;

					&:nth-child(1) {
						margin-right: 20rpx;
					}

					&.active {
						background-color: #63b4ff;
						color: #fff;
					}
				}

			}

			.gender-selector {}

			.gender-label {
				margin-bottom: 10px;
				font-weight: 700;
			}

			.gender-cards {
				font-family: Arial, sans-serif;
				display: flex;
				justify-content: space-between;
			}

			.gender-card {
				width: 45%;
				height: 150px;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 10px;
				position: relative;
				font-size: 18px;
			}

			.gender-card:not(.selected) {
				background-color: #FFFFFF;
			}

			.gender-card.selected {
				color: #FFFFFF;
			}

			.gender-card:nth-child(1):not(.selected) {
				color: #FFC0CB;
				border: 1px solid #FFC0CB;
			}

			.gender-card:nth-child(2):not(.selected) {
				color: #63b4ff;
				border: 1px solid #63b4ff;
				border: 1px solid #63b4ff;
			}

			.gender-card:nth-child(1).selected {
				background-color: #FFC0CB;
			}

			.gender-card:nth-child(2).selected {
				background-color: #63b4ff;
			}

			.crown {
				position: absolute;
				top: 5px;
				left: 5px;
				font-size: 20px;
			}
		}


		// 拍摄方式
		.Shooting {
			width: 99%;
			padding: 30rpx 30rpx 0 30rpx;
			box-sizing: border-box;

			.Shooting-text {
				display: flex;
				align-items: center;
				padding: 15rpx 0;
				box-sizing: border-box;

				text {
					&:nth-child(1) {
						font-weight: 600;
					}

					&:nth-child(2) {
						font-size: 20rpx;
					}
				}
			}

			.box {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 10rpx;

				.box-input {
					display: flex;
					align-items: center;

					input {
						width: 170rpx;
						font-size: 28rpx;
						color: #666;
					}

					text {
						color: #666;
					}
				}

				.picture {
					width: 320rpx;
					margin: 20rpx 0;
					position: relative;

					image {
						width: 100%;
						border-radius: 20rpx;
					}

					text {
						position: absolute;
						top: 40rpx;
						left: 0;
						display: block;
						width: 100%;
						padding: 10rpx;
						box-sizing: border-box;
						background-color: rgba(128, 128, 128, 0.5);
						border-radius: 20rpx 20rpx 0 0;
						text-align: center;
						color: #FFFFFF;
					}

					// &.active {
					// 	background-color: rgba(255, 255, 255, 0.7);
					// }

					// &.grayed {
					// 	opacity: 0.5;
					// }
				}
			}
		}

		//  选择人数 门票
		.cameraman {
			width: 99%;
			padding: 30rpx 30rpx 0 30rpx;
			box-sizing: border-box;

			.cameraman-text {
				font-weight: 700;
			}

			.box {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.uni-section {
					width: 100%;
					margin: 30rpx 0;
				}

				.radio-group {
					width: 95%;
					margin: 20rpx 20rpx 0 20rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
				}

				.admission {
					margin: 20rpx 0;
				}

				.picture {
					width: 320rpx;
					margin: 20rpx 0;
					border-radius: 50rpx;
					text-align: center;
					color: #000000;
					padding: 20rpx;
					box-sizing: border-box;
					font-size: 26rpx;

					&.active {
						background-color: #63b4ff;
						color: #FFFFFF;
						text-align: center;
					}
				}
			}
		}


		$primary-color: #1890ff;
		$text-color: #333;

		// 选择包车 选择司机摄影的类型
		.vertical-selector {
			padding: 30rpx 30rpx 0 30rpx;
			box-sizing: border-box;
			border-radius: 10rpx;

			.selector-title {
				font-size: 32rpx;
				font-weight: 700;
				margin-bottom: 20rpx;
				color: $text-color;
			}

			.selector-option {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 30rpx 20rpx;
				background-color: #fff;
				margin-bottom: 20rpx;
				border-radius: 10rpx - 2rpx;
				box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
				transition: all 0.3s ease;

				&.selected {
					background-color: lighten($primary-color, 35%);
					border: 2rpx solid $primary-color;
				}

				.option-text {
					font-size: 28rpx;
					color: $text-color;
				}

				.check-icon {
					color: $primary-color;
					font-size: 32rpx;
				}
			}
		}

		.pace {
			width: 100%;
			display: flex;
			justify-content: space-around;
			align-items: center;
			background-color: #fff;
			padding: 20rpx 20rpx 50rpx 20rpx;
			box-sizing: border-box;
			position: fixed;
			bottom: 0rpx;
			z-index: 999;

			button {
				flex: 1;

				&:nth-child(1) {
					color: #000000;
					background-color: #fff;
					text-align: center;
					padding: 20rpx 30rpx;
					box-sizing: border-box;
					margin-right: 20rpx;
				}

				&:nth-child(2) {
					color: #ffffff;
					background-color: #1890ff;
					text-align: center;
					padding: 20rpx 30rpx;
					box-sizing: border-box;
				}
			}
		}
	}
</style>